﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ProyectGraficView.aspx.cs"
    Inherits="Demo.Web.Grafics.ProyectGraficView" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        function tipRenderer(storeItem, item) {
            //calculate percentage.
            var total = 0;

            if (storeItem.get('ResourcesNumber') > 0) {
                App.Chart1.getStore().each(function(rec) {
                    total += rec.get('ResourcesNumber');
                });

                this.setTitle(storeItem.get('Name') + ': ' + Math.round(storeItem.get('ResourcesNumber') / total * 100) + '%');
            }
        }       
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <ext:Panel ID="Panel1" runat="server" Width="800" Height="600" Title="Proyectos Estatus"
        Layout="FitLayout">
        <Items>
            <ext:Chart ID="Chart1" runat="server" Animate="true" Shadow="true" InsetPadding="60"
                Theme="Base:gradients">
                <LegendConfig Position="Right" />
                <Store>
                    <ext:Store ID="Store1" runat="server" AutoDataBind="true">
                        <Model>
                            <ext:Model ID="Model1" runat="server">
                                <Fields>
                                    <ext:ModelField Name="Name" />
                                    <ext:ModelField Name="ResourcesNumber" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <Series>
                    <ext:PieSeries AngleField="ResourcesNumber"     ShowInLegend="true" Donut="0" Highlight="true"
                        HighlightSegmentMargin="20">
                        <Label Field="Name" Display="None" Contrast="true" Font="18px Arial" />
                        <Tips ID="Tips1" TrackMouse="true"  Width="140" runat="server" Height="28">
                            <Renderer Fn="tipRenderer" />
                        </Tips>
                    </ext:PieSeries>
                </Series>
            </ext:Chart>
        </Items>
    </ext:Panel>
    </form>
</body>
</html>
